<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>菜单列表</title>
        <% include("/common/common_css_js.html"){} %>
    </head>
    <body>

        <div id="layout1" class="mini-layout" style="width:100%;height:100%;padding: 2px">
            <div title="center" region="center" bodyStyle="overflow:hidden;" style="border:0;">
                <!--Splitter-->
                <div class="mini-splitter" style="width:100%;height:100%;" borderStyle="border:0;">
                    <div size="400" maxSize="500" minSize="300" showCollapseButton="false" style="border-width:1px;border-top: none;border-left: none">
                        <div style="width: 100%; padding: 2px">
                            <a  class="mini-button" iconCls="icon-ok" onclick="addMenuNode()">添加菜单项</a>
                            <a  class="mini-button" iconCls="icon-ok" onclick="editMenuNode()">编辑菜单项目</a>
                            <a  class="mini-button" iconCls="icon-remove" onclick="removeMenuNode()">删除菜单项目</a>
                        </div>
                        <!--Tree-->
                        <ul id="leftTree" class="mini-tree" url="${base}/menu/loadMenuTree" style="width:100%;height:100%;"
                            showTreeIcon="true" textField="name" idField="id" resultAsTree="false"
                            onnodeselect="onNodeSelect">
                        </ul>
                    </div>


                    <div showCollapseButton="false" style="border:0px;" >
                        <a  class="mini-button" iconCls="icon-ok" onclick="saveMenuNode()" style="margin-left: 5px;margin-top: 5px">保存</a>
                        <div style="margin-top: 5px"></div>
                        <div id="menuForm" style="padding: 5px">

                            <input id="opType" name="opType" emptyText="操作类型值"  class="mini-hidden" required="true" enabled="true" enabled="true" requiredErrorText="操作类型不能为空" />

                            <span>父菜单项:</span>
                            <input id="pid" name="pid" class="mini-treeselect" style="width:200px;" textField="name" valueField="id" emptyText="请选择..."
                                   required="true" allowInput="false" showNullItem="true" nullItemText="请选择..." requiredErrorText=""/>
                            <span style="color: red">如果父菜项为0,则表示添加一级菜单</span>

                            <div style="margin-top: 5px"></div>

                            <span>菜单ID:</span>
                            <input id="id" name="id" emptyText="id值"  class="mini-textbox" required="true" enabled="true" enabled="true" requiredErrorText="ID不能为空" onvaluechanged="idValueChange" />
                            <div style="margin-top: 5px"></div>

                            <div style="margin-top: 5px"></div>

                            <span>菜单名称:</span>
                            <input id="name" name="name" class="mini-textbox" style="width: 200px" emptyText="菜单名称" required="true" requiredErrorText="菜单名称不能为空"/>

                            <div style="margin-top: 5px"></div>

                            <span>图标样式:</span>
                            <input id="iconCls" name="iconCls" class="mini-textbox" style="width: 400px" emptyText="图标CSS样式" required="true" requiredErrorText="图标CSS样式不能为空"/>

                            <div style="margin-top: 5px"></div>
                            <span>URL:</span>
                            <input id="url" name="url" class="mini-textbox" style="width: 500px" emptyText="菜单URL" required="false" requiredErrorText="菜单URL不能为空"/>
                            <span style="color: red;"> 注意：菜单创建时除如果是该菜单有子菜单，请不要填写URL，其他情况请填写必须填写URL </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            mini.parse();
            let tree = mini.get("leftTree");

            // 获取菜单Form对象
            let menuForm = new mini.Form("#menuForm");

            // opType  pid  id  name  iconCls  url
            let opType = mini.get("opType");
            let pid = mini.get("pid");
            let name = mini.get("name");
            let iconCls = mini.get("iconCls");
            let url = mini.get("url");

            // 操作类型名
            let opTypeName = {add:"add",update:"update"};


            // 数据库中当前菜单数据
            let menuData = [];

            $(function () {

                tree.load();

                // 加载列表数据
                reloadMenu();
            });

            function reloadMenu(){
                menuData = public_getServerData("${base}/menu/getMenuNoPageList",{pid:"0"});
                pid.loadList(menuData,"id","pid");
            }




            /**
             * 节点点击后加载显示
             */
            function onNodeSelect(e){
                let selectedNode = e.node;
                mini.get("id").setValue(selectedNode.id);
                mini.get("id").set({enabled:false});
                pid.setValue(selectedNode.pid);
                name.setValue(selectedNode.name);
                iconCls.setValue(selectedNode.iconCls);
                url.setValue(selectedNode.url);
                opType.setValue(opTypeName.update);
            }

            /**
             * id值发生变化时调用，主要是检测是否有重复的ID
             */
            function idValueChange(e) {
                let newId = e.value;
                let ret = public_getServerData("${base}/menu/checkMenuId?menuId=" + newId);
                if(!ret.ok){
                    mini.get("id").setValue("");
                    showAlert(ret.message);
                }
            }

            /**
             * 这是添加菜单
             */
            function addMenuNode() {
                let selectedNode = tree.getSelectedNode();
                if(public_isEmpty(selectedNode)){
                    showAlert("请选择一个节点,做为该新添菜单项的父级菜单");
                    return;
                }
                pid.setValue(selectedNode.id);
                mini.get("id").setValue("");
                mini.get("id").set({enabled:true});
                name.setValue("");
                iconCls.setValue("");
                url.setValue("");
                opType.setValue(opTypeName.add);
            }

            /**
             * 这是编辑菜单节点
             */
            function editMenuNode() {
                let selectedNode = tree.getSelectedNode();
                if(public_isEmpty(selectedNode)){
                    showAlert("请选择需要编辑的菜单节点");
                    return;
                }
                pid.setValue(selectedNode.pid);
                mini.get("id").setValue(selectedNode.id);
                mini.get("id").set({enabled:false});
                name.setValue(selectedNode.name);
                iconCls.setValue(selectedNode.iconCls);
                url.setValue(selectedNode.url);
                opType.setValue(opTypeName.update);
            }


            /**
             * 节点删除
             */
            function removeMenuNode() {
                showAlert("暂未提供该功能，请联系管理员!")
            }

            /**
             * 添加或更新节点
             */
            function saveMenuNode() {
                menuForm.validate();
                if (menuForm.isValid() == false) {
                    return;
                }

                let menuData = menuForm.getData(true);

                let opTypeValue = menuData.opType;
                let saveTitle = opTypeValue==opTypeName.add ? "确定保存菜单？":"确定更新菜单？";

                mini.confirm(saveTitle, "菜单保存提示",
                    function(action) {
                        if (action == "ok") {
                            let ret = public_getServerData("${base}/menu/save?opType=" + opTypeValue,menuData);
                            showAlert(ret.message,function (){
                                if(ret.ok){
                                    tree.load();
                                    // 加载列表数据
                                    reloadMenu();
                                    // 保持当前值
                                    pid.setValue(menuData.pid);
                                }
                            });
                        }
                    });
            }




        </script>

    </body>




</html>